<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>停车场信息查询</title>
    <base href="<%=basePath%>/" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"; /><!-- IE的渲染模式 -->
    <meta name="renderer" content="webkit" /><!-- 浏览器高速模式 -->
    
    <meta name="keywords" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="description" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="author" content="blackshadowwalker" />
    
	<link href="css/common.css" rel="stylesheet" />

	<script src="scripts/jquery/jquery-1.7.min.js"></script>
	<script src="bootstrap/3.2/js/bootstrap.min.js"></script>
	<link href="bootstrap/3.2/css/bootstrap.css" rel="stylesheet"/>
	
	<script src="scripts/jquery/tableSorter/scripts/JQueryPlugin/TableSort.js" type="text/javascript"></script>
	<script src="index/js/index.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=15EdmORyQbzDsGOQHiTsW2oh"></script>
	
	<script type="text/javascript">
		var msg = "${msg}";
		if(msg!="")
			alert(msg);
	
		function del(id){
			if(confirm("确定删除吗？"))
				location.href="<%= basePath%>/${action}?method=delete&id="+id;
		}
		$(document).ready(function(){
			
			$("ul.nav-tabs li").click(function(){
				var tab = $(this);
				var nav = tab.parent();
				$(nav).children("li").each(function()
				{
					var obj = $(this);
					obj.removeClass("active");
				});
				tab.addClass("active");
			});
			
			$("#mytable").sorttable({
		            ascImgUrl: "scripts/jquery/tableSorter/images/bullet_arrow_up.png",
		            descImgUrl: "scripts/jquery/tableSorter/images/bullet_arrow_down.png",
		            ascImgSize: "8px",
		            descImgSize: "8px",
		            onSorted: function (cell) {
// 		               alert(cell.index() + " -- " + $.trim(cell.text()));
		            }
		        });
			
    	});
    	
	</script>
	
	<style>
		body{
			margin-left: 10px;
			margin-top: 7px;
			height:100%;
			width:98%;
			min-width:500px;
			font-size:10px;
		}
		#baidumap{
			width:98%;
			height:450px;
		}
	</style>
	
  </head>
  
  <body >
  	
  	<div>
		<div class="alert-info" style="">
			<s:if test="#request.i>=0">
				 <a href="${action }?method=add&flag=1" style="color:#fff;"  class="btn btn-success " >
					添加停车场
				</a>
			</s:if>
			<div style="display:inline;margin-left:30px;color:#f00;">
				${msg }
			</div>
		</div >
	</div>
	
	<ul class="nav nav-tabs" name="nav-tabs" role="tablist">
		<li class="active" name="list"><a href="javascript:show(0);">列表</a></li>
		<li name="map"> <a href="javascript:show(1);">地图</a></li>
		<li name="picture" class="hidden"> <a href="javascript:show(2);">图表</a></li>
	</ul>

	<br />
	
	<div class="content" type="list">
		<table id="mytable" class="table  table-hover" style="width:100%;">
	  		<tr role="head">
	  			<th sort="true" class="hidden"> id</th>
	  			<th sort="true" >停车场名称</th>
	  			<th sort="true"  class="hidden hidden-xs">车场描述</th>
	  			<th sort="true" class="hidden-xs">停车场类型</th>
	  			<th sort="true" >白天单价</th>
	  			<th sort="true" class="hidden-xs">夜间单价</th>
	  			<th sort="true" class="hidden-xs">车场地址</th>
	  			<th sort="true" >电话</th>
	  			<th sort="true" >剩余/总车位</th>
	  			<th sort="true" class="hidden-xs">评分</th>
	  			<th class="hidden">经纬度</th>
	  			<th sort="true" class="hidden-xs">状态</th>
	  			<th >操作</th>
	  		</tr>
	  
		   <s:iterator id="l"  value="list" status="index">  
		  		<s:if test='#index.odd == true'>
					<s:set name="var_class" value="'row-odd'" />
				</s:if>
				<s:else>
					<s:set name="var_class" value="'row-even'" />
				</s:else>
				
				<tr>
					<td class="hidden" name="PId"> ${PId }</td>
					<td name="PName" class="pnamefds"><s:property value="#l.PName" /> </td>
					<td name="PDesc" class="hidden hidden-xs"><s:property value="#l.PDesc" /> </td>
					<td name="PTypeName" class="hidden-xs"><s:property value="#l.PTypeName" /> </td>
					<td name="dayPrice" >${dayPrice}元/${dayTimeUtil }小时</td>
					<td name="nightPrice" class="hidden-xs" >${nightPrice } 元/${nightTimeUtil }小时</td>
					<td name="addr" 	  class="hidden-xs" >${addr }</td>
					<td name="telePhone"  ><s:property value="#l.telePhone" /> </td>
					<td name="parkNumber"  >${remainderParkNumber } / ${parkNumber } </td>
					<td name="score" class="hidden-xs"><s:property value="#l.score" /> </td>
					<td name="position" class="hidden"> <input name="position" type="text" value="${longitude},${latitude}"  /></td>
					<td name="statusName" class="hidden-xs">${statusName}</td>
					<td name="operate">
					
						<s:if test="#request.claim>0">
							<a class="btn btn-info" href="${action }?method=claim&id=${PId}" title="认领">
								<span class="glyphicon glyphicon-list-alt"></span>
							</a>
						</s:if>
					
						<s:if test="#request.delete>0">
							<a class="btn btn-danger" href="javascript:del(${PId})" title="删除">
								<span class="glyphicon glyphicon-trash"></span>
							</a>
						</s:if>
						<s:if test="#request.update>0">
							<a class="btn btn-success" href="${action }?method=update&id=${PId}" title="修改">
								<span class="glyphicon glyphicon-edit"></span>
							</a>
						</s:if>
						<s:if test="#request.view>0">
							<a class="btn btn-info" href="${action }?method=view&id=${PId}" title="查看详情">
								<span class="glyphicon glyphicon-list-alt"></span>
							</a>
						</s:if>
						
					</td>
				</tr>
				
		  </s:iterator>
	  	</table>
	</div>
	
	<div id="baidumap" class="content" type="map" style="display:none;">
		map
	</div>
	
	<script>
			var madd = "${request.add}";
			var mdelete = "${request.delete}";
			var mview = "${request.view}";
			
			//切换显示方式
			function show(showstyle){
	    		$("div.content").hide();
	    		if(showstyle==0){//列表
	    			$("div.content[type='list']").show();
	    		}else if(showstyle==1){//地图
	    			$("div.content[type='map']").show();
	    			if(map==null){
	    				setTimeout( drawMarks, 1000);
	    			}else{
	    				setTimeout( drawMarks, 100);
	    			}
	    		}else  if(showstyle==1){//图表
					//
	    		}
	    	}
	    	
	    	function drawMarks(){
	    			map.clearOverlays();//清除地图上所有覆盖物
	    			//添加动画标注点
	    			$("input[name='position']").each(function(){
	    				var obj = $(this).parent().parent();
	    				var val = $(this).val() ;
	    				var postion = val.split(",");
	    				if(window.console){
	    					console.log(val);
	    					console.log(postion);
	    					console.log(obj);
	    				}
	    				if(postion.length==2){
		    				var point = new BMap.Point( postion[0], postion[1] );
							var marker = new BMap.Marker(point);  // 创建标注
							map.addOverlay(marker);              // 将标注添加到地图中
							var html = "名称:"+obj.children("td[name='PName']").html() + "<br />";
							html += "电话:"+obj.children("td[name='telePhone']").html() + "<br />";
							if(mview=="1")
								html += "<a class=\"btn \" href=\"${action }?method=view&id="+obj.children("td[name='PId']").html()+"\">查看详情</a>";
							console.log(html);
							var infoWindow=new BMap.InfoWindow(html);
							marker.addEventListener("click", function(){
								this.openInfoWindow(infoWindow);
							//	document.getElementById("img_").onload = function (){
							//	     infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
							//	}
						  });
						};
	    			});
	    	}
	    	
	    	
			var map = null;
			$(document).ready(function(){
				
				//百度地图
	    		setTimeout(function(){
					// 百度地图API功能
					map = new BMap.Map("baidumap");            // 创建Map实例
					var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
					map.centerAndZoom(point,12);                     // 初始化地图,设置中心点坐标和地图级别。
					var gc = new BMap.Geocoder();    
					
					//IP定位获取当前城市
					function myFun(result){
					    var cityName = result.name;
					    map.setCenter(cityName);
					}
					var myCity = new BMap.LocalCity();
					myCity.get(myFun);//设置IP定位获取当前城市
					
					map.enableScrollWheelZoom();                            //启用滚轮放大缩小
					map.enableDragging(); //开启拖拽
					map.enableInertialDragging();//启用地图惯性拖拽，默认禁用。
					
					map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));     //2D图，卫星图
					map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));    //左上角，默认地图控件
					
					map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
					
				},500);
			});
	</script>
	
  </body>
</html>
